// 使用渲染属性抽离公用逻辑
import React, { Component } from 'react'

class ResizeAble extends Component {//返回ResizeAble组件(可以不写名字（ResizeAble），就是匿名组件)
        // 初始值
        state={
            //  浏览器可视区的宽度和高度(获取窗口的宽和高);
            // 浏览器窗口的可视区域是指除了地址栏、菜单栏、功能栏以及状态栏等之外的，我们打开网页能显示的那一部分区域。简单理解僦是，浏览器窗口的可视区域就是可以用来显示的区域。
            size:[window.innerWidth,window.innerHeight]
        }
    
        onResize=()=>{
            // 修改state
            this.setState({
                size:[window.innerWidth,window.innerHeight]
            })
    
        }
        // 添加事件
        componentDidMount(){
            // resize：文档视图调整大小时会触发resize事件
            window.addEventListener('resize',this.onResize);
            // 修改可视区的宽高
            document.title=this.state.size.join("x");
        }
    
        // 更新阶段
        componentDidUpdate(){
            document.title=this.state.size.join("x");
        }
        // 销毁期
        componentWillUnmount(){
            window.addEventListener('resize',this.onResize)
        }
        render() {
            
            return (
                <div>
                    {
                        // 从props上面接受的都是传过来的
                        // render这个函数执行完之后返回值是html
                        // 说明这个组件需要接受一个属性叫render
                        this.props.render(this.state.size)
                    }
                </div>
            )
        }
    
}


export default ResizeAble
